<template>
  <div class="index-wrap">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="6" :xl="6" :lg="6">
        <div class="medical-item medical-left-top">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <div class="medical-header">
            <div class="medical-title">听力/视力等级统计</div>
            <div>2018-08-18</div>
          </div>
          <div class="medical-chart1">
            <v-chart
              ref="chart1"
              autoresize
              :option="chart1"
              style="width: 100%; height: 100%"
            />
            <ul class="medical-chart1-xline">
              <li>正常</li>
              <li>轻度失聪/青光眼</li>
              <li>重度失聪/老花眼</li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :xl="6" :lg="6">
        <div class="medical-item medical-left-top">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <div class="medical-header">
            <div class="medical-title">综合评定结果</div>
            <div>2018-08-18</div>
          </div>
          <div class="medical-chart1">
            <v-chart
              autoresize
              :option="chart2"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :xl="6" :lg="6">
        <div class="medical-item medical-left-top">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <div class="medical-header">
            <div class="medical-title">入住老人年龄统计占比</div>
            <div>2018-08-18</div>
          </div>
          <div class="medical-chart1">
            <v-chart
              autoresize
              :option="chart3"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :xl="6" :lg="6">
        <div class="medical-item medical-left-top">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <div class="medical-header">
            <div class="medical-title">疾病统计</div>
            <div>2018-08-18</div>
          </div>
          <div class="medical-chart1 medical-chart4">
            <v-chart
              autoresize
              :option="chart4"
              style="width: 100%; height: 100%"
            />
            <div class="medical-room-wrap">
              <div v-for="(item,index) in chartlist" :key="index" class="room-text" >
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="24" :xl="24" :lg="24">
        <div class="medical-item">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <div class="medical-header">
            <div class="medical-title">健康评估</div>
            <div>2018-08-18</div>
          </div>
          <div class="medical-chart5">
            <el-table
              ref="tableSort"
              v-loading="listLoading"
              :data="list"
              stripe
              :element-loading-text="elementLoadingText"
              :header-row-style="{ color: '#fff', background: 'linear-gradient(90deg, #006CEA, #233C66)' }"
              :header-cell-style="{
                background: 'rgba(0, 0, 0, 0)',
                color: '#fff',
              }"
              header-cell-class-name="tableCell"
              row-class-name="tableRow"
              :highlight-current-row="false"
              class="tableSort"
            >
              <el-table-column
                width="200"
                align="center"
                show-overflow-tooltip
                label="头像"
              >
                <template slot-scope="scope">
                 <el-image
                    class="img-class"
                    :src="scope.row.sex == 1 ? img1 : img2"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="name"
                label="姓名"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="性别"
                prop="sex"
                align="center"
                :formatter="sexFormatter"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="年龄"
                prop="age"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="日常生活活动能力"
                prop="daily_result"
                width="140"
                align="center"
                :formatter="valueFormat1"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="精神状态"
                prop="spirit_result"
                align="center"
                :formatter="valueFormat2"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="感知与沟通能力"
                prop="feel_result"
                width="140"
                align="center"
                :formatter="valueFormat3"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="社会参与能力"
                prop="s_result"
                align="center"
                :formatter="valueFormat4"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="综合评定"
                prop="test_result"
                align="center"
                :formatter="valueFormat5"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="时间"
                prop="action_time"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import VChart from 'vue-echarts'
  import { getMedicineData } from "@/api/diseaseApi";
  import { healthData } from "@/api/caseApi";
  import { getData, getDataYbed, getDataYwc } from "@/api/orderData";
  export default {
    name: "Index",
    components: {
      VChart,
    },
    data() {
      return {
        img1: require("@/assets/images/m_p.png"),
        img2: require("@/assets/images/w_p.png"),
        year1: "",
        imgShow: true,
        listLoading: false,
        list: [],
        imageList: [],
        elementLoadingText: "加载中...",
        chartlist: ['高血压', '高血脂', '高血糖', '糖尿病', '冠心病','其他'],
        chart1: {
           legend: {
             orient: 'horizontal',
             right: '10%',
             left: 'right',
             top: 10,
             itemGap: 50,
             textStyle: {
               color: '#597093',
               fontSize: 13
             }
           },
           grid: {
             top: '20%',
             left: '0',
             right: '5%',
             bottom: '6%',
             containLabel: true
           },
           aria: {
             enabled: true,
             decal: {
                show: true
             }
           },
           tooltip: {},
           color: ['#5B8CFF', '#FB4E85'],
           dataset: {
             source: [
               ['product', '正常', '轻度失聪/青光眼', '重度失聪/老花眼'],
               ['听力'],
               ['智力']
             ]
           },
           xAxis: {
             type: 'value',
             axisLine: {
               show: false, //隐藏X轴轴线
             },
             splitLine: {
              show: false
             },
             axisTick: {
               show: false, //隐藏X轴刻度
             },
             axisLabel: {
               show: false,
             },
           },
           yAxis: {
             type: 'category',
             axisLine: {
              show: false,
             },
             axisLabel: {
               show: false,
              textStyle: {
                  color: '#226CA3',
                   fontSize: 13
              }
             },
             inverse: true,
             splitLine: {
              show: false
             },
             axisTick:{
              show: false
             },
           },
           series: [
             { type: 'bar', barWidth: 17, seriesLayoutBy: 'row' },
             { type: 'bar', barWidth: 17, seriesLayoutBy: 'row' },
           ]
        },
        chart2: {
          color: ['#0B7AFD'],
          grid: {
            top: "20%",
            bottom: "13%",
            left: "8%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: 'cross',
              label: {
                color: "#ffffff",
                borderColor: "#0B7AFD",
                shadowColor: "#0B7AFD",
                backgroundColor: '#0B7AFD'
              },
            },
          },
          xAxis: {
            data: ["能力完好","轻度受损","中度受损","重度受损"],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#226CA3',
                fontSize: 12
              }
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              nameGap: 25,
              nameTextStyle: {
                color: '#226CA3',
                padding: [0, 0, 0, -30]
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#163670",
                  width: 0.5
                }
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                    color: '#226CA3',
                    fontSize: 14,
                    fontWeight: "bold"
                }
              },
            },
          ],
          series: [
            {
              name: "人",
              type: "bar",
              data: [],
              barWidth: 23,
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(110, 193, 244, 0.2)',
                borderRadius: 12
              },
              itemStyle: {
                normal: {
                  barBorderRadius: 12,
                  color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                          {offset: 0, color: '#01B1FF'},
                          {offset: 1, color: '#035CFF'}
                      ]
                  ),
                }
              },
            },
          ]
        },
        chart3: {
          title: {
            show: false
          },
          tooltip: {
              trigger: 'item',
          		formatter: function(params){
          			return params.data.name +"岁 : "+params.data.value+"人" + " " + params.percent + "%";
          		}
          },
          legend: [
          	{
          		orient: 'horizontal',
          		bottom: '20%',
          		left: "center",
          		icon: "circle",
          		data: ["61_70岁", "71_80岁"],
          		itemWidth: 7,  // 设置宽度
          		itemHeight: 7, // 设置高度
          		itemGap: 60,
          		textStyle: {
          			color: '#597093',
          			fontSize: 13
          		}
          	},
          	{
          		orient: 'horizontal',
          		bottom: '10%',
          		left: "center",
          		icon: "circle",
          		data: ["81_90岁", "91_120岁"],
          		itemWidth: 7,  // 设置宽度
          		itemHeight: 7, // 设置高度
          		itemGap: 70,
          		// itemGap: 60,
          		textStyle: {
          			color: '#597093',
          			fontSize: 13
          		}
          	}
          ],
          color: ["#3EE09A", "#9B4AF8", "#FF8D00", "#FB497C"],
          series: [
              {
          				type: 'pie',
          				radius: '50%',
          				center: ['50%', '40%'],
          				radius: ['25%', '35%'],
          				avoidLabelOverlap: false,
          				data: [],
          				label: {
          					color: "#fff",
          					formatter: '{b} {d}%',
          				},
          				emphasis: {
          				    itemStyle: {
          				        shadowBlur: 10,
          				        shadowOffsetX: 0,
          				        shadowColor: 'rgba(0, 0, 0, 0.5)'
          				    }
          				}
              }
          ]
        },
        //疾病统计
        chart4: {
          polar: {
              radius: [10, '60%'],
              center: ['35%', "50%"]
            },
            angleAxis: {
              startAngle: 75,
            },
            radiusAxis: {
              type: 'category',
              data: ['高血压', '高血脂', '高血糖', '糖尿病', '冠心病','其他'],
              axisLabel: {
                show: false
              },
            },

            tooltip: {},
            series: {
              type: 'bar',
              data: [],
              coordinateSystem: 'polar',
              label: {
                show: false
              },
              itemStyle: {
            		color: function(params) {
            				// 给出颜色组
            				if(params.dataIndex == 5) {
            				  return "#FFC000"
            				} else if(params.dataIndex == 4) {
            				  return "#FF8D00"
            				} else if(params.dataIndex == 3) {
            				  return"#5583FF"
            				} else if(params.dataIndex == 2) {
            				  return "#3EE09A"
            				} else if(params.dataIndex == 1) {
            				  return "#FB497C"
            				} else if(params.dataIndex == 0) {
            				  return "#9B4AF8"
            				}
            		}
              },
              label: {
                show: false,
                position: 'middle',
                formatter: '{b}: {c}'
              }
            }
        },
      }
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
    },
    methods: {
      sexFormatter(row) {
        if (row.sex == 1) {
          return "男";
        } else {
          return "女";
        }
      },
      valueFormat1(row) {
        let value = row.daily_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      valueFormat2(row) {
        let value = row.spirit_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      valueFormat3(row) {
        let value = row.feel_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      valueFormat4(row) {
        let value = row.s_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      valueFormat5(row) {
        let value = row.test_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      getTableData() {
        healthData().then((resp) => {
          if (resp.code === 200) {
            //听力/视力等级统计
            let tlData = [];
            let slData = [];
            for (
              let index = 0;
              index < resp.data.sl_level[0].length,
                index < resp.data.tl_level[0].length;
              index++
            ) {
              const element = resp.data.sl_level[0][index];
              const element1 = resp.data.tl_level[0][index];
              tlData.push(Object.values(element1)[0]);
              slData.push(Object.values(element)[0]);
            }
            this.$set(this.chart1.dataset.source, 1, ['听力'].concat(tlData));
            this.$set(this.chart1.dataset.source, 2, ['智力'].concat(slData));
            this.list = resp.data.elder_health;
            //综合评定结果
            let healthTestData = [];
            for (
              let index = 0;
              index < resp.data.health_test[0].length;
              index++
            ) {
              const element = resp.data.health_test[0][index];
              healthTestData.push(Object.values(element)[0]);
            }
            this.chart2.series[0].data = healthTestData;
            //老人年龄分布
            let elderData = [];
            for (let index = 0; index < resp.data.elder[0].length; index++) {
              const element = resp.data.elder[0][index];
              let temp = {};
              temp.name = Object.keys(element)[0] + "岁";
              temp.value = Object.values(element)[0];
              elderData.push(temp);
            }
            this.chart3.series[0].data = elderData;
            //疾病统计
            let illData = [];
            let xAxisData1 = [];
            for (let index = 0; index < resp.data.ill[0].length; index++) {
              const element = resp.data.ill[0][index];
              xAxisData1.push(Object.keys(element)[0]);
              illData.push(Object.values(element)[0]);
            }
            this.$set(this.chart4.series, 'data', illData);
          }
        });
      },
      handleChange(value) {
        this.getMedicineData({time: value})
      },
      handleCommand(command) {
        this.$message("click on item " + command);
      },
    },
  };
</script>
<style lang="scss" scoped>
  @keyframes rotate {
  	    from {
  	        transform: rotate(0deg);
  	    }
  	    to {
  	        transform: rotate(360deg);
  	    }
  	}
    .img-class{
      width: 36px !important;
      height: 36px !important;
      border-radius: 50% !important;
    }
    ::v-deep {
      .tableCell {
        .cell {
          color: #fff;
        }
      }

      .el-table thead{
        height: 52px;
      }

      .el-table {
        background-color: transparent;
        &::before{
          height: 0;
        }
      }

      .el-table td.el-table__cell,
      .el-table th.el-table__cell.is-leaf{
        border: none;
      }

      .el-table .cell {
        line-height: 1;
      }

      .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell{
        background-color: transparent;
      }

      .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
        background-color: #627dae80;
      }

      .tableRow {
        color: #fff;
        background-color: transparent;

        &:hover {
          td {
            background-color: transparent;
          }
        }
        .cell {
          color: #fff;
        }
      }
    }
    .kanhu-top {
        display: flex;
        justify-content: center;
        & > div{
          &:nth-child(n+2) {
            margin-left: 50px;
          }
        }
    }
    .kanhu-top img,
    .kanhu-bottom img
    {
      width: 128px;
    }
    .kanhu-text {
        margin-top: 15px;
    }
    .kanhu-text p {
        font-size: 20px;
        font-weight: bold;
        color: #00A2FF;
        text-align: center;
        line-height: 20px;
    }
    .kanhu-text span {
        display: block;
        font-size: 14px;
        color: rgb(79 157 226 / 56%);
        font-weight: 400;
        margin-top: 10px;
        line-height: 14px;
        text-align: center;
    }
    .kanhu-bottom {
        display: flex;
        justify-content: center;
        margin-top: 24px;
        & > div{
          &:nth-child(n+2) {
            margin-left: 50px;
          }
        }
    }
    .medical-room-wrap{
      position: absolute;
      display: flex;
      flex-direction: column;
      top: 30px;
      right: 50px;
      text-align: center;
      color: #597093;
      .room-text {
          margin: 12px 0;
          padding-left: 16px;
          line-height: 13px;
          position: relative;
          &::before{
            content: "";
            display: block;
            position: absolute;
            left: 0;
            top: 1px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #5583FF;
          }
          &:nth-child(1) {
            &::before {
              background-color: #9B4AF8;
            }
          }
          &:nth-child(2) {
            &::before {
              background-color: #FB497C;
            }
          }
          &:nth-child(3) {
            &::before {
              background-color: #3EE09A;
            }
          }
          &:nth-child(4) {
            &::before {
              background-color: #5583FF;
            }
          }
          &:nth-child(5) {
            &::before {
              background-color: #FF8D00;
            }
          }
          &:nth-child(6) {
            &::before {
              background-color: #FFC000;
            }
          }
      }
    }
  .index-wrap {
    min-height: calc( 100vh - 65px) !important;
    box-sizing: border-box;
    width: 100%;
    padding: 20px 30px !important;
    margin: 0 !important;
    background: url(../../assets/institutional/bg.png) no-repeat;
    background-size: cover;
    .medical-left-top{
      height: 348px;
      box-sizing: border-box;
    }
    .medical-chart1{
      width: 100%;
      height: 316px;
      padding: 0 22px 8px 23px;
      box-sizing: border-box;
    }
    .medical-chart5{
      width: 100%;
      min-height: 316px;
      padding: 0 22px 20px 23px;
      box-sizing: border-box;
      margin-top: 20px;
    }
    .medical-chart4{
      position: relative;
    }
    .medical-chart1-xline{
      position: absolute;
      top: 100px;
      left: 23px;
      font-size: 13px;
      color: #226CA3;
      line-height: 12px;
      font-weight: bold;
    }
    .medical-chart1-xline li:nth-child(n+2){
      margin-top: 65px;
    }
    .medical-item{
      width: 100%;
      border: 2px solid #394E75;
      border-radius: 10px 0px 0 10px;
      position: relative;
      background: rgba(36, 57, 96, 0.13);
      box-shadow: inset 0 0 19px rgb(26 61 122);
      .medical-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 23px 20px 0 23px;
        .medical-title{
          position: absolute;
          font-size: 20px;
          color: #ffffff;
          font-weight: bold;
          padding-left: 20px;
          line-height: 20px;
          &::before{
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 11px;
            height: 20px;
            background-color: #009CFF;
          }
        }
      }
      &::before{
        content: "";
        display: block;
        position: absolute;
        right: -2px;
        top: -2px;
        width: 0;
        height: 0;
        border-top: 7px solid #4DBECE;
        border-left: 7px solid transparent;
        z-index: 1;
      }
      &::after{
        content: "";
        display: block;
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 0;
        height: 0;
        border-bottom: 17px solid #4DBECE;
        border-left: 17px solid transparent;
      }
      .medical-top{
        width: 71px;
        height: 65px;
        position: absolute;
        left: -2px;
        top: -4px;
        z-index: 1;
				object-fit: inherit;
      }
      .medical-bot{
        width: 71px;
        position: absolute;
        left: -2px;
        bottom: -4px;
        z-index: 1;
      }
    }
  }
</style>
